$(document).ready(function () {

    $("#header").load("Nav.html #Nav", function () {
        element.init();
        $("#ImgTable").addClass("layui-this");
    });

    var main1 = echarts.init(document.getElementById('main'));

    var main2 = echarts.init(document.getElementById('main1'));

    $.get("/ShenBlue/imp/Statistical_Month_Json", function (data) {
        let i = 0;
        const month = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        console.log(data);
        for (; i < data.length; i++) {
            const x = data[i] == undefined ? 0 : data[i].month;
            console.log(typeof x);
            month[x - 1] = data[i].count;
        }
        main1.setOption({

            tooltip: {},
            legend: {
                data: ['还款人数']
            },
            xAxis: {
                data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
            },
            yAxis: {
                type: "value",
                data: [5, 10, 15, 20, 25, 30, 35, 40]
            },
            series: [{
                name: '还款人数',
                type: 'bar',
                data: month
            }]
        });
        main2.setOption({
            legend: {
                data: ['还款人数']
            },
            series: [
                {
                    name: '还款人数',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            formatter: '{b}:{c}' + '\n\r' + '({d}%)',
                            show: true,
                            position: 'left'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true
                        }
                    },
                    data: [          // 数据数组，name 为数据项名称，value 为数据项值
                        {value: month[0], name: '1月'},
                        {value: month[1], name: '2月'},
                        {value: month[2], name: '3月'},
                        {value: month[3], name: '4月'},
                        {value: month[4], name: '5月'},
                        {value: month[5], name: '6月'},
                        {value: month[6], name: '7月'},
                        {value: month[7], name: '8月'},
                        {value: month[8], name: '9月'},
                        {value: month[9], name: '10月'},
                        {value: month[10], name: '11月'},
                        {value: month[11], name: '12月'}
                    ]

                }
            ]
        });
    });
});
